<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
@extend('admin/controller_index')
<div class="title">
                <span class="layui-breadcrumb" lay-separator="-">
                    <a href="">service</a>
                    <a href="">service monitor</a>
                    <a><cite>websocket</cite></a>
                </span>
</div>
<div class="content" style="margin-bottom: 20px;">
    <div class="monitor_info">
        <div class="title">
            <h1>websocket监视器</h1>
            <div class="icon_container j-center-vertical">
                <i class="layui-icon layui-icon-console"></i>
            </div>
        </div>
        <div class="layui-row">
            <div class="status layui-col-xs12 layui-col-sm6 layui-col-md4">
                <div class="status_content flex">
                    <div class="icon_container j-center-vertical">
                        <i class="layui-icon layui-icon-console"></i>
                    </div>
                    <div class="content_detailed j-center" style="width:220px;">
                        <div class="layui-row j-center-vertical j-center">
                            <div class="layui-col-lg10 flex">
                                <h1 class="text-center text-black-h1">status:</h1>
                                <div v-if="websocket_status==true" class="icon_container" style="position:relative;top:3px;background-color:#0cca62;width: 20px;height: 20px;">
                                    <i class="layui-icon layui-icon-ok-circle" style="font-size: 20px;color: white;line-height: 21px;"></i>
                                </div>
                                <button v-if="websocket_status==true" type="button" v-on:click="ask_close_service('websocket_chat')"class="layui-btn layui-btn-sm layui-btn-danger">
                                    <i class="layui-icon layui-icon-close-fill"></i>关闭服务
                                </button>
                                <div v-if="websocket_status==false" class="icon_container layui-bg-red" style="position:relative;top:3px;color: white;;width: 20px;height: 20px;">
                                    <i class="layui-icon layui-icon-close-fill layui-bg-red" style="font-size: 20px;color: white"></i>
                                </div>
                                <button v-on:click="start_service('websocket_chat')" v-if="websocket_status==false" type="button" class="layui-btn layui-btn-sm layui-btn-normal">
                                    <i class="layui-icon layui-icon-play"></i>启动
                                </button>
                            </div>
                            <div class="layui-col-lg10 flex-nowarp">
                                <h1 class="text-center text-black-h1 text-no-wrap" style="font-size: 15px;">开始时间:</h1>
                                <h1 class="text-center text-black-h1 text-no-wrap"  style="font-size: 15px;line-height: 23px;">@{{time}}</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="status layui-col-xs12 layui-col-sm6 layui-col-md4">
                <div class="status_content flex">
                    <div class="icon_container layui-bg-green  j-center-vertical">
                        <i class="layui-icon layui-icon-user"></i>
                    </div>
                    <div class="content_detailed j-center" style="width:220px;">
                        <div class="layui-row j-center-vertical j-center">
                            <div class="layui-col-lg10 flex">
                                <h1 class="text-center text-black-h1">在线列表</h1>
                                <button type="button"  id="user_list_switch" class="layui-btn layui-btn-sm layui-btn-normal">
                                    <i class="layui-icon layui-icon-find-fill"></i>用户列表
                                </button>
                            </div>
                            <div class="layui-col-lg10 flex">
                                <h1 class="text-center text-black-h1" style="font-size: 15px;line-height: 15px;">在线用户:</h1>
                                <h1 class="text-center text-black-h1" style="font-size: 15px;line-height: 15px;">{{$online_user}}</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="status layui-col-xs12 layui-col-sm6 layui-col-md4">
                <div class="status_content">
                    <div class="title_">
                        <h1 class="text-black-h1 text-center1">在线用户量化</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="notify_user_pannel layui-col-sm12 layui-col-xs12">
        <div class="notify_user_pannel_container">
            <div class="title_"><h1 class="text-center1 text-black-h1">发送通知</h1></div>
            <div class="query flex">
                <form class="layui-form flex j-center layui-col-xs-12" style="margin-top:10px;">
                    <label class="layui-form-label text-black-h1"style="width: 60px;">标题</label>
                    <div class="layui-input-block" style="margin-left: 0;">
                        <input type="text" name="title" v-model="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
                    <label class="layui-form-label text-black-h1" style="width: 60px;">日期</label>
                    <div class="layui-input-inline">
                        <input type="text" v-model="date" class="layui-input text-center1" id="date" placeholder=" - ">
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label text-black-h1" style="width: 60px;">审核</label>
                        <div class="layui-input-block flex" style="margin-left:90px;">
                            <input type="checkbox" id="is_pass" name="like[write]" title="已审核" checked>
                            <input type="checkbox" id="unpass"name="like[read]" title="未审核" checked>
                        </div>
                    </div>
                    <button v-on:click="query_notify_list" type="button" class="query_btn layui-btn layui-col-md1 layui-btn-normal layui-col-xs10 j-center-min col-sm-left-0 text-center">
                        <i class="layui-icon layui-icon-search"></i>查询</button>
                </form>
            </div>
            <div class="add_notify flex">
                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" v-on:click="open">新增</button>
                <button type="button" class="layui-btn layui-btn-danger layui-btn-sm">删除</button>
            </div>
            <div class="layui-col-sm12 overflow-x-sroll" style="margin-bottom: 50px;">
            <table class="layui-table layui-col-12 overflow-x-sroll overflow-y-sroll">
                <thead>
                <tr>
                    <th class="text-no-wrap">发布者</th>
                    <th class="layui-col-xs-1 text-center" style="width: 50px;!important;">ID</th>
                    <th class="text-no-wrap">创建时间</th>
                    <th class="layui-col-lg-2">通知内容</th>
                    <th class="text-no-wrap">标题</th>
                    <th class="text-no-wrap">通知方式</th>
                    <!--<th><>-->
                    <th>审计</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="i in notify_list">
                    <td>@{{i.publisher}}</td>
                    <td  style="width: 50px;!important;"><p>@{{i.id}}</p></td>
                    <td>@{{i.created_at}}</td>
                    <td class="layui-col-lg-2 layui-col-xs-2"><p>@{{i.content}}</p></td>
                    <td>@{{i.title}}</td>
                    <td>@{{i.notify_way}}</td>
                    <td class="j-center">
                        <button v-if="i.is_pass=='0'" type="button" class="layui-btn layui-btn-sm layui-btn-danger j-center">待审计</button>
                        <button v-else type="button" class="layui-btn layui-btn-sm layui-btn-normal j-center"><i class="layui-icon layui-icon-ok"></i></button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        </div>
    </div>
</div>
<div class="add_notify_bar_pannel j-center hidden" id="notify_edit">
    <div class="add_notify_bar_pannel_container">
        <div class="img_container j-center hidden" style="width:400px;;height: 90%;position: absolute;background-color: rgba(0,0,0,0.6);z-index: 999;">
            <img src="http://img5.imgtn.bdimg.com/it/u=3300305952,1328708913&fm=26&gp=0.jpg" alt="" id="upload_img" class="j-center-vertical" style=";width: 100%;height:auto;max-height:400px;">
            <button type="button" class="layui-btn layui-btn-sm layui-btn-normal j-bottom layui-btn-danger j-right"><i class="layui-icon layui-icon-delete"></i> 删除</button>
            <div class="img_close j-top j-right radius-50" style="width: 30px;height: 30px;background-color: rgba(0,0,0,0.56)">
                <i class="layui-icon layui-icon-close-fill magin-padding-0 text-white text-center1" style="z-index: 999;width: 30px;height: 30px;font-size: 30px;"></i>
            </div>
        </div>
        <form class="layui-form" action="">
            <input type="text" name="title" required v-model="notify_data.title"  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            <select name="notify_way" lay-filter="notify_way" lay-verify="notify_way" id="notify_way" v-model="notify_data.notify_way" @change="get_select_value">
                <option value="window">弹窗通知</option>
                <option value="text">文本通知</option>
                <option value="html">自定html</option>
            </select>
            <div class="layui-input-block magin-left-0">
                <textarea v-model="notify_data.notify_content" name="" required lay-verify="required" placeholder="请输入通知内容" class="layui-textarea" style="height: 280px;"></textarea>
            </div>
        </form>
        <div>
            <input type="file" multiple accept="image/gif, image/jpeg, image/png" id="upload"style="width: 100px;position: absolute;left:15px;opacity: 0;">
            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-bg-green j-switch" id="image">
                <i class="layui-icon layui-icon-picture-fine"></i>添加图片</button>
            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" v-on:click="add_notify">确认通知</button>
        </div>
    </div>
</div>
@endextend
<script>
    layui.use('element', function(){
        var element = layui.element;
    });
    new Vue({
        el: '#app2',
        data: {
            page:1,
            title:"",
            date:"",
            is_pass:"",
            un_pass:"",
            is_load:false,
            notify_list:[],
            user_info:{
                name:"",
                permission:"",
                email:"",
                head_img:"",
                admin_csrf_token:"",
            },
            active:'{{$is_active}}',
            websocket_status:'{{$websocket_status}}',
            time:'{{$created}}',
            notify_data:{
                title:"",
                    user:"all",
                notify_way:"",
                notify_content:"",
            }
    },
    created(){
            this.parse_websocket_status();
            this.init();
            this.get_user_info();
            this.get_select_value();
            this.query_notify_list();
    },

    methods: {
        get_user_info() {
            this.user_info = eval('(' + localStorage.getItem("admin_user_data") + ')');
            this.is_load = true;
        },
        parse_websocket_status(){
            if(this.websocket_status=='true'){
                this.websocket_status=true
            }
            if(this.websocket_status=='false'){
                this.websocket_status=false
            }
        },
        is_active_(name){
            if(name==this.active){
                return true
            }
            return false;
        },
        query_notify_list() {
            var self=this;
            axios.get("{{index_path()}}/system/notify/list",{
                params:{
                    admin_csrf_token: this.user_info.admin_csrf_token,
                    title:this.title,
                    is_pass:$("#is_pass").is(':checked'),
                    un_pass:$("#unpass").is(':checked'),
                    date:$("#date").val(),
                    page:this.page,
                    limit:5}
            }).then(function (res) {
                self.notify_list=res["data"]["data"];
                console.log(self.notify_list);
            }).catch(function (err) {
                console.log(err);
            })
        },
        get_select_value(){
            var self=this;
            layui.use('form', function() {
                var form = layui.form
                form.on('select(notify_way)', function (data) {
                    self.notify_data.notify_way=data.value;
                    console.log("adas");
                });
            });
        },
        start_service(service_name) {
            var self = this;
            axios.post("{{index_path()}}/admin/service",
                {
                    service: service_name,
                    admin_csrf_token: self.user_info.admin_csrf_token
                }).then(function (res) {
                console.log(res);
                if (res.data["code"] == 200) {
                    console.log("load");
                    if (service_name == "websocket_chat") {
                        self.websocket_status = true;
                        self.time = get_current_time();
                        alert("service success to start");
                    }
                    else {
                        window.location.reload();
                    }
                }
                if (res.data["code"] == 403) {
                    alert("登录失效");
                    window.location.href = "{{index_path()}}/admin/user";
                }
            }).catch(function () {

            });
        },
        ask_restart_service(service_name) {
            var self = this;
            layui.use('layer', function () {
                var layer = layui.layer;
                layer.confirm('强制终止会导致服务中断，已登录用户会全部退出服务?', {icon: 3, title: '提示'}, function (index) {
                    self.restart_service(service_name);
                    layer.close(index);
                });
            });
        },
        ask_close_service(service_name) {
            var self = this;
            layui.use('layer', function () {
                var layer = layui.layer;
                layer.confirm('强制重新会导致服务中断，已登录用户会全部退出服务?', {icon: 3, title: '提示'}, function (index) {
                    self.close_service(service_name);
                    layer.close(index);
                });
            });
        },
        restart_service(service_name) {
            var self = this;
            axios.post("{{index_path()}}/admin/service/restart",
                {
                    service: service_name,
                    admin_csrf_token: self.user_info.admin_csrf_token
                }).then(function (res) {
                console.log(res);
                if (res.data["code"] == 200) {
                    console.log("load");
                    if (service_name == "websocket_chat") {
                        self.websocket_status = true;
                        alert("service success to restart");
                    }
                    else {
                        //window.location.reload();
                    }
                }
                if (res.data["code"] == 403) {
                    alert("登录失效");
                    window.location.href = "{{index_path()}}/admin/user";
                }
            }).catch(function () {

            });
        },
        add_notify() {
            let param = new FormData();
            console.log(this.notify_data);
            param.append("image",  document.getElementById("upload").files[0]);
            param.append("notify_way", this.notify_data.notify_way);
            param.append("title", this.notify_data.title);
            param.append("user", this.notify_data.user);
            param.append("notify_content", this.notify_data.notify_content);
            let config = {
                headers:{'Content-Type':'multipart/form-data'}
            };
            axios.post('{{index_path()}}/system/notify_user', param,config)
                .then(response => {
                    if (response.data.code === 0) {
                        self.ImgUrl = response.data.data
                    }
                    console.log(response.data)
                })
        },
        open() {
            this.react_open($("#notify_edit"));
        },
        react_open(element_object) {
            var width = Number(element_object.css("width").replace("px", "")) + Number(element_object.css("padding-left").replace("px", "")) + Number(element_object.css("padding-right").replace("px", ""));
            if (width < get_html_width()) {
                width = width + "px";
            }
            else {
                width = "100%";
            }
            console.log(width);
            layui.use('layer', function () {
                var layer = layui.layer;
                layer.open({
                    type: 1,
                    content: element_object,
                    scrollbar: true,
                    title: "添加通知",
                    area: [width]
                });
            });
        },
        query_data(){
            var self=this;
            layui.use('table', function() {
                var table = layui.table;
                table.reload('notify_list', {
                    where:{
                        admin_csrf_token: self.user_info.admin_csrf_token,
                        title:self.title,
                        is_pass:$("#is_pass").is(':checked'),
                        un_pass:$("#unpass").is(':checked'),
                        date:$("#date").val()
                    }
                });
            });
        },
        close_service(service_name) {
            var self = this;
            axios.post("{{index_path()}}/admin/service/close",
                {
                    service: service_name,
                    admin_csrf_token: self.user_info.admin_csrf_token
                }).then(function (res) {
                if (res.data["code"] == 200) {
                    console.log("load");
                    if (service_name == "websocket_chat") {
                        self.websocket_status = false;
                        alert(service_name + "has been closed");
                    }
                    else {
                        //window.location.reload();
                    }
                }
                if (res.data["code"] == 403) {
                    alert("登录失效");
                    window.location.href = "{{index_path()}}/admin/user";
                }
            }).catch(function () {
            });
        },
        init() {
            var self=this;
            layui.use('table', function(){
                var table = layui.table;
                //第一个实例
                table.render({
                    elem: '#demo'
                    ,height: 312
                    ,url: "{{index_path()}}/admin/user/list" //数据接口
                    ,where:{admin_csrf_token: self.user_info.admin_csrf_token}
                    ,page: true //开启分页
                    ,cols: [[ //表头
                        {field: 'id', title: 'ID', width:80, sort: false, fixed: 'left'},
                        {field: 'head_img', title:'头像', width:80, templet: '#head_img'},
                        {field: 'name', title: '用户名', width:80}
                        ,{field: 'sex', title: '性别', width:80, sort: true}
                    ]]
                });
                // table.render({
                //     elem: '#notify_list' //指定原始表格元素选择器（推荐id选择器）
                //     ,height: 315 //容器高度
                //     ,id: 'notify_list'
                //     ,url: '{{index_path()}}/system/notify/list'
                //     ,where:{
                //         admin_csrf_token: self.user_info.admin_csrf_token,
                //         title:self.title,
                //         is_pass:[$("#is_pass").is(':checked'),$("#unpass").is(':checked')],
                //         date:self.date,
                //     }
                //     ,page: true
                //     ,cols: [[ //表头
                //         {field: 'publisher', title:'发布者', width:80, fixed: 'left'},
                //         {field: 'id', title: 'ID', width:110, sort: false},
                //         {field: 'created_at', title: '创建时间', width:180}
                //         ,{field: 'content', title: '通知内容', width:300},
                //         {field:'title','title':'标题',width:80},
                //         {field:'notify_way','title':'通知方式',width:150},
                //         {field:'expired','title':'过期时间',width:80},
                //         {field:'is_pass','title':'审计',width:80,templet:'#is_pass_tpi'}
                //     ]]
                // });
            });
            layui.use('layer', function(){
                var layer = layui.layer;
                $("#user_list_switch").click(function () {
                    layer.open({
                        type: 1,
                        content: $('#user_list') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    });
                });
            });
            $(document).ready(function () {
                layui.use('laydate', function () {
                    var laydate = layui.laydate;
                    //常规用法
                    laydate.render({
                        elem: '#date',
                        range: true
                    });
                });
                layui.use('form', function () {
                    var form = layui.form;
                });

                function change_input() {
                    console.log("load");
                    let inputArr = $('#image input');
                    let add_inputId = 'image';     //需要被触发的input
                    for (let i = 0; i < inputArr.length; i++) {
                        // 根据input的value值判断是否已经选择文件
                        if (!inputArr[i].value) {          //如果没有选择,获得这个input的ID
                            add_inputId = inputArr[i].id;
                            break;
                        }
                    }
                    if (add_inputId) {
                        return $("#" + add_inputId).click();
                    } else {
                        alert("最多选择" + this.imgNum + "张图片")
                    }
                }

                set_image();

                function set_image() {
                    var self = this;
                    $("#upload").change(function () {
                        var $file = $(this);
                        var fileObj = $file[0];
                        var windowURL = window.URL || window.webkitURL;
                        var dataURL;
                        var $img = $("#upload_img");

                        if (fileObj && fileObj.files && fileObj.files[0]) {
                            dataURL = windowURL.createObjectURL(fileObj.files[0]);
                            //self.notify_data.image=dataURL;
                            console.log(dataURL);
                            //console.log(self.notify_data.image);
                            $img.attr('src', dataURL);
                        } else {
                            dataURL = $file.val();
                            var imgObj = document.getElementById("preview");
                            imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                            imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
                        }
                        $(".img_container").slideDown(300);
                    });
                    $(".img_close").click(function () {
                        $(".img_container").slideUp(300);
                    });
                }
            });
        }
    }
    });
</script>
</body>
</html>